/* 
* 
* 1、listVideoInputDevices 
*    获取摄像头设备得到一个摄像头设备数组，根据摄像头的id选择使用的摄像头
* 2、decodeFromInputVideoDeviceContinuously() 
*    第一个参数为前面数组得到的摄像头的id，根据传入的摄像头id 选择摄像头扫描 ，id为null时 默认使用面向环境的摄像头
*/
import React, { useEffect, useState } from 'react'
import { Toast } from 'antd-mobile'
import { BrowserMultiFormatReader } from '@zxing/library'
import "./index.less"
export default function ScanCode(props) {
    const codeReader = new BrowserMultiFormatReader()
    const [num, changeNum] = useState(6)
    const [videoLength,setvideoLength] = useState(0)
    useEffect(() => {
        openScan()
        return (() => {
            destoryScan()
        })
    }, [])

    const destoryScan = () => {
        codeReader.reset();
        codeReader.stopContinuousDecode();
    }

    const openScan = async () => {
        codeReader.listVideoInputDevices().then((videoInputDevices) => {
            // 获取第一个摄像头设备的名称
            const videoLength = videoInputDevices.length;
            let firstDeviceId = videoInputDevices[videoLength - 1].deviceId;

            // Toast.show({
            //     content:"摄像头数量:"+videoLength+ "名称:" + videoInputDevices[videoLength-1].label,
            //     duration: 5000
            // })
            setvideoLength(videoLength)
            
            // const videoInputDeviceslablestr = JSON.stringify(videoInputDevices[0].label);
            // if (videoInputDevices.length > 1) {
            //     // 判断是否后置摄像头
            //     if (videoInputDeviceslablestr.indexOf('back') > -1) {
            //         firstDeviceId = videoInputDevices[0].deviceId;
            //     } else {
            //         firstDeviceId = videoInputDevices[1].deviceId;
            //     }
            // }
            // const videoInputDeviceslablestr = JSON.stringify(videoInputDevices[num].label);

            decodeFromInputVideoFunc(firstDeviceId, videoLength);
        }).catch(err => {
            console.error(err);
            changeNum(1)
            openScan();
        })

    }

    const decodeFromInputVideoFunc = (firstDeviceId, length) => {
        // firstDeviceId  为null 时默认选择面向环境的摄像头
        codeReader.decodeFromVideoDevice(firstDeviceId, 'video', (result, err) => {
            if (result) {
                Toast.show({
                    content: "扫描成功"
                })
                props.getResult(result.text)
                destoryScan()
            }
        })
    }

    const change = () => {
        if (videoLength > 2) {
            if (num > 2) {
                changeNum(0)
            } else {
                changeNum(6)
            }
            openScan()
        } else {
            if (num === 0) {
                changeNum(1)
            } else {
                changeNum(0)
            }
            openScan();
        }
    }

    const backScan = () => {
        props.getResult('返回')
        destoryScan()
    }
    return (
        <div className="page-scan">
            <div className='back' onClick={backScan}><img src={require("../../assets/img/arrow_back.png").default} alt="" /> 返回</div>
            <div className="scan-box">
                <video id="video" className="scan-video" autoplay></video>
                <div className="qr-scanner">
                    <div className="box">
                        <div className="line"></div>
                        <div className="angle"></div>
                    </div>
                </div>
                <div className="scan-tip">扫描条形码</div>
                {/* <span class="change" onClick={change}>
                    <img src={require("../../assets/img/icon_tran.png").default} alt="" />
                </span> */}
            </div>
        </div>
    )
}